<!doctype html>
<html>

<head>
    <title>Set Page Color Popup</title>
    <style media="screen">
        h1.ui.center.header {
            margin-top: 2em;
        }
    </style>
    <link rel="stylesheet" href="http://semantic-ui.com/dist/semantic.min.css">

    <script type="text/javascript" src="http://www.semantic-ui.com/javascript/library/jquery.min.js"></script>
    <script type="text/javascript" src="http://semantic-ui.com/dist/semantic.min.js">
    </script>
</head>

<body>
  <div class="ui checkbox">
    <input type="checkbox"  checked="">
    <label>Label</label>
  </div>

    <h1 class="ui center aligned header">2PassWord Settings</h1>

    <div class="ui container">
        <div class="ui relaxed divided items">

            <div class="item">
                <div class="ui small image">
                    <img src="http://semantic-ui.com/examples/assets/images/wireframe/image.png">
                </div>
                <div class="content">
                    <a class="header">Content Header</a>
                    <div class="meta">
                        <a>Date</a>
                        <a>Category</a>
                    </div>
                    <div class="description">
                        A description which may flow for several lines and give context to the content.
                    </div>
                    <div class="extra">
                        <img src="http://semantic-ui.com/examples/assets/images/wireframe/square-image.png" class="ui circular avatar image"> Username
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="ui small image">
                    <img src="http://semantic-ui.com/examples/assets/images/wireframe/image.png">
                </div>
                <div class="content">
                    <a class="header">Content Header</a>
                    <div class="meta">
                        <a>Date</a>
                        <a>Category</a>
                    </div>
                    <div class="description">
                        A description which may flow for several lines and give context to the content.
                    </div>
                    <div class="extra">
                        <div class="ui right floated primary button">
                            Primary
                            <i class="right chevron icon"></i>
                        </div>
                        <div class="ui label">Limited</div>
                    </div>
                </div>
            </div>
            <div class="item">
                <div class="content">
                    <a class="header">Content Header</a>
                    <div class="meta">
                        <a>Date</a>
                        <a>Category</a>
                    </div>
                    <div class="description">
                        A description which may flow for several lines and give context to the content.
                    </div>

                    <div class="extra">
                        <div class="ui input">
                            <input type="text" placeholder="Search...">
                        </div>
                        <div class="ui right floated primary button">
                            Primary
                            <i class="right chevron icon"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">

$('.checkbox')
  .checkbox()
  .first().checkbox({
    onChecked: function() {
      console.log($(this));
    },
    onUnchecked: function() {
      console.log('onUnchecked called<br>');
    },
    onEnable: function() {
      console.log('onEnable called<br>');
    },
    onDisable: function() {
      console.log('onDisable called<br>');
    },
    onDeterminate: function() {
      console.log('onDeterminate called<br>');
    },
    onIndeterminate: function() {
      console.log('onIndeterminate called<br>');
    },
    onChange: function() {
      console.log('onChange called<br>');
    }
  })
;
</script>
</html>
